<template>
  <div
    class="editable-div"
    contenteditable="true"
    @paste="handlePaste"
  >
    {{ defaultText }}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'EditableDiv',
  setup() {
    const defaultText = ref('这是一段默认文案，右键点击可以粘贴新内容')

    const handlePaste = (event: ClipboardEvent) => {
      // 阻止默认粘贴行为
      event.preventDefault()
      // 获取剪贴板中的文本
      const text = event.clipboardData?.getData('text/plain')
      if (text) {
        // 更新内容
        const target = event.target as HTMLElement
        target.textContent = text
      }
    }

    return {
      defaultText,
      handlePaste
    }
  }
})
</script>

<style scoped>
.editable-div {
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px;
  cursor: text;
  outline: none;
}

.editable-div:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style> 